<html>
<head profile="http://www.w3.org/2002/12/namespace">
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/tundra/tundra.css">
<title>Dojo OpenLayers Benchmarks</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<!-- hosted version -->
<script type="text/javascript" src="http://openlayers.org/api/2/OpenLayers.js"></script>

<script type="text/javascript">
	var djConfig = {
		parseOnLoad : true
	};
</script>

<script type="text/javascript" src="../../../../dojo/dojo.js"></script>

<script type="text/javascript">

	require(["dojo/ready", 
					"dojo/dom",
					"dojo/_base/array",
					"dojo/_base/html",
					"dojox/geo/openlayers/Map", 
					"dojox/geo/openlayers/Layer", 
					"dojox/geo/openlayers/GfxLayer", 
					"dojox/geo/openlayers/Point", 
					"dojox/geo/openlayers/LineString", 
					"dojox/geo/openlayers/GeometryFeature", 
					"dojo/parser"],
	function(ready, dom, arr, html, Map, Layer, GfxLayer, Point, LineString, GeometryFeature, parser) {

	var map;
	//	var messageDiv;
	var Cookies = {
		init : function(){
			var allCookies = document.cookie.split('; ');
			for ( var i = 0; i < allCookies.length; i++) {
				var cookiePair = allCookies[i].split('=');
				this[cookiePair[0]] = cookiePair[1];
			}
		},

		create : function(name, value, days){
			var expires = "";
			if (days) {
				var date = new Date();
				date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
				expires = "; expires=" + date.toGMTString();
			}
			document.cookie = name + "=" + value + expires + "; path=/";
			this[name] = value;
		},

		erase : function(name){
			this.create(name, '', -1);
			this[name] = undefined;
		}
	};

	Cookies.init();
	var numLoad = 4;
	var numLoadString = "numLoad";
	var cumulativeTimeString = "cumulativeTime";

	ready(function(){
		var options = {
			baseLayerName : "TheLayer",
			baseLayerType : dojox.geo.openlayers.BaseLayerType.OSM,
			touchHandler : true
		};

		if (!Cookies[numLoadString])
			Cookies.create(numLoadString, numLoad);
		if (!Cookies[cumulativeTimeString])
			Cookies.create(cumulativeTimeString, "0");
		var div = dom.byId("map");
		map = new Map(div, options);
		var la = map.getLayer("name", "TheLayer");
		arr.forEach(la, function(l){
			var ol = l.olLayer;
			ol.events.register("loadstart", this, loadStart);
			ol.events.register("tileloaded", this, tileLoaded);
			ol.events.register("loadend", this, loadEnd);
		}, this);
		map.fitTo([ -160, 70, 160, -70 ]);

	});

	var startDate = null;
	var numTiles = undefined;

	function loadStart(event){
		startDate = new Date();
		numTiles = event.object.numLoadingTiles;
	}

	function tileLoaded(event){
		if (!startDate)
			startDate = new Date();
		if (!numTiles)
			numTiles = event.object.numLoadingTiles;
	}

	function loadEnd(event){
		var endDate = new Date();
		var time = endDate.getTime() - startDate.getTime();
//		console.log("loading " + numTiles + " tiles took " + time + " ms");
		if (Cookies[cumulativeTimeString]) {
			var ct = Cookies[cumulativeTimeString];
			var ict = parseInt(ct) + time;
			Cookies.create(cumulativeTimeString, ict.toString());
		}
		if (Cookies[numLoadString]) {
			var nl = Cookies[numLoadString];
			var i = parseInt(nl) - 1;
			Cookies.create(numLoadString, i.toString());
			if (i > 0) {
				window.location.reload();
			} else {
				ct = Cookies[cumulativeTimeString];
				log(numLoad + " load(s) took " + ct + " ms");
				log(ct / numLoad + " ms for each load");
				Cookies.erase(numLoadString);
				Cookies.erase(cumulativeTimeString);
				benchPoints();
        benchLines();
        showLayers();
			}
		}
	}
  
  var pointLayer = null;
	var numPoints = dojo.isIE ? 10 : 1000;
	function benchPoints(){
		var layer = new GfxLayer();
		map.addLayer(layer);
		var startDate = new Date();
		for ( var i = 0; i < numPoints; i++) {
			var x = Math.random() * 360 - 180;
			var y = Math.random() * 180 - 90;
			var g = new Point({
				x : x,
				y : y
			});
			var pf = new GeometryFeature(g).setStroke([ 0, 0, 0 ]).setShapeProperties({
				r : 10
			});
			layer.addFeature(pf);
		}
		var endDate = new Date();
		var time = endDate.getTime() - startDate.getTime();
		log("creating " + numPoints + " points took " + time + " ms");

		startDate = new Date();
		layer.redraw();
		endDate = new Date();
		time = endDate.getTime() - startDate.getTime();
		log("redrawing " + numPoints + " points took " + time + " ms");

		var olm = map.getOLMap();
		var center = olm.getCenter();
		var zoom = olm.getZoom();
		startDate = new Date();
		olm.setCenter(center, zoom + 1);
		endDate = new Date();
		time = endDate.getTime() - startDate.getTime();
		log("zooming " + numPoints + " points took " + time + " ms");
    olm.setCenter(center, zoom);
    pointLayer = layer;
    map.removeLayer(layer);
	}

var lineLayer = null;
	var numLines = 100;
	var numPointsPerLine = 20;
	function benchLines(){
		var layer = new GfxLayer();
		map.addLayer(layer);
		var startDate = new Date();

		for ( var i = 0; i < numLines; i++) {
			var x = Math.random() * 360 - 180;
			var y = Math.random() * 180 - 90;
			var start = {
				x : x,
				y : y
			};
			var a = [];
			a.push(start);
			for ( var j = 0; j < numPointsPerLine; j++) {
				var dx = Math.random() * 3 - 1.5;
				var dy = Math.random() * 3 - 1.5;
        if(x + dx > -180 && x + dx < 180 && y + dy > -90 && y + dy < 90) {
          x = x + dx;
          y = y + dy;
          var p = {x:x, y:y};
          a.push(p);
        }
      }
      var g = new LineString(a);
			var lf = new GeometryFeature(g).setStroke([ 0, 0, 0 ]);
			layer.addFeature(lf);
	  }

		var endDate = new Date();
		var time = endDate.getTime() - startDate.getTime();
		log("creating " + numLines + " lines took " + time + " ms");

		startDate = new Date();
		layer.redraw();
		endDate = new Date();
		time = endDate.getTime() - startDate.getTime();
		log("redrawing " + numLines + " lines took " + time + " ms");

		var olm = map.getOLMap();
		var center = olm.getCenter();
		var zoom = olm.getZoom();
		startDate = new Date();
		olm.setCenter(center, zoom + 1);
		endDate = new Date();
		time = endDate.getTime() - startDate.getTime();
		log("zooming " + numLines + " lines took " + time + " ms");
    olm.setCenter(center, zoom);
    lineLayer = layer;
    map.removeLayer(layer);
	}
  
  function showLayers() {
    map.addLayer(pointLayer);
    map.addLayer(lineLayer);
  }
  
  var msgDiv = null;
  function log(msg) {
    console.log(msg);
    if(msgDiv == null) {
      var layer = new Layer();
      map.addLayer(layer);
      
      var s = layer.olLayer.map.getSize();

      html.style(layer.olLayer.div, {
          width : s.w.toFixed(),
          left : "0px",
          top : "0px",
          height : s.h.toFixed()
      });
      msgDiv = dojo.create("div", {
        style : {
          width : "100%",
          left : "0px",
          top : "0px",
          height : "100%",
          position : "absolute"
        }
      }, layer.olLayer.div);
    }
    var d = dojo.create("div", {
    }, msgDiv);
    d.textContent = msg;
    d.innerText = msg;
  }
  });
  
</script>

<style type="text/css">
.olLayerGoogleCopyright {
	visibility: hidden;
}
</style>

</head>
<body class="tundra">
</head>

<div id="map" style="background-color: #b5d0d0; width: 100%; height: 100%;"></div>

</body>
</html>
